<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="任务状态" >
        <el-select v-model="order.status"  placeholder="任务状态">
          <el-option label="未开始" value="未开始"></el-option>
          <el-option label="进行中" value="进行中"></el-option>
          <el-option label="已完成" value="已完成"></el-option>
          <el-option label="已拒绝" value="已拒绝"></el-option>
          <el-option label="已关闭" value="已关闭"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="优先级">
        <el-select v-model="order.priority" placeholder="优先级">
          <el-option label="低" value="低"></el-option>
          <el-option label="中" value="中"></el-option>
          <el-option label="高" value="高"></el-option>
          <el-option label="紧急" value="紧急"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单类型">
        <el-select v-model="order.type" placeholder="订单类型">
          <el-option label="普通订单" value="普通订单"></el-option>
          <el-option label="预购订单" value="预购订单"></el-option>
          <el-option label="过期订单" value="过期订单"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属客户">
        <el-input v-model="order.name" placeholder="姓名"></el-input>
      </el-form-item>
<!--      <el-form-item label="负责人">-->
<!--        <el-select v-model="order.created" placeholder="订单时间">-->
<!--          <el-option-->
<!--              v-for="item in options"-->
<!--              :key="item.id"-->
<!--              :label="item.limitName"-->
<!--              :value="item.id">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="onSubmit(1,pageSize)">查询</el-button>
        <el-button type="danger" @click="onResetSelect()">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
        ref="filterTable"
        :data="tableData"
        style="width: 100%">
      <el-table-column prop="id" label="ID" width="60" align="center"></el-table-column>
      <el-table-column
          prop="created"
          label="日期"
          sortable
          width="180"
          column-key="date"
          :filters="[]"
          :filter-method="filterHandler"
      >
      </el-table-column>
      <el-table-column
          prop="status"
          label="任务状态"
          width="80"
          :formatter="forstatus">
      </el-table-column>
      <el-table-column
          prop="priority"
          label="优先级"
          width="80"
          :formatter="forpriority">
      </el-table-column>
      <el-table-column
          prop="type"
          label="订单类型"
          :formatter="fortype">
      </el-table-column>
      <el-table-column
          prop="name"
          label="所属客户"
          :formatter="forname">
      </el-table-column>
      <el-table-column
          prop="director"
          label="负责人"
          :formatter="fordirectior">
      </el-table-column>
      <el-table-column
          prop="theme"
          label="主题"
          :formatter="fortheme">
      </el-table-column>
      <el-table-column
          prop="tag"
          label="标签价格"
          width="100"
          :filters="[{ text: '', value: '' }]"
          :filter-method="filterTag"
          filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.tag === 'S车' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.tag}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="primary"
              @click="showEditForm(scope.$index, scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!-- 以下是修改用户的弹出表单Dialog -->
    <el-dialog title="修改订单" :visible.sync="dialogFormVisible" width="800px" style="text-align: left">
      <div style="width: 90%;">
        <el-form :model="editForm" label-width="140px">
          <el-form-item label="任务状态" >
            <el-input v-model="editForm.status" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="所属项目">
            <el-input v-model="editForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="负责人">
            <el-input v-model="editForm.director" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="主题">
            <el-input v-model="editForm.theme" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="订单标签">
            <el-input v-model="editForm.tag" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEditForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "orderm",
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      formInline: {
        user: "",
        region: "",

      },

      order: {
        status: "",
        priority: "",
        type: "",
        name: "",
        director: "",
        theme: "",
        tag:""
      },
      editForm: {},
      total: 100,
      currentPage: 1,
      pageSizes: [5,10,15,20],
      pageSize: 10,
      isSelect: false,
      type: []

    }
  },
  methods: {
    onSubmit(page,pageSize) {
      this.isSelect = true;
      let url = 'http://localhost:8080/order/selectByCondition'
      let data = this.qs.stringify(this.order);
      data = data+'&page='+page+'&pageSize='+pageSize;
      this.axios.post(url,data).then((response)=>{
        console.log(response);
        let jsonResult = response.data;
        if(jsonResult.state == 20000){
          let data = jsonResult.data;
          this.tableData = data.list;
          this.currentPage = data.page;
          this.total = data.total;
        }else{
          this.$alert(jsonResult.message,'操作失败',{
            confirmButtonText:'确定',
            callback:action => {}
          })
        }
      })
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date');
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    fortype(row, column) {
      return row.type;
    },
    forname(row, column) {
      return row.name;
    },
    fordirectior(row, column) {
      return row.director;
    },
    fortheme(row, column) {
      return row.theme;
    },
    forstatus(row, column) {
      return row.status;
    },
    forpriority(row, column) {
      return row.priority;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    showEditForm(row,order) {
      console.log(order, row);
      let url = 'http://localhost:8080/order/'+order.id;
      console.log(order.id);
      this.axios.get(url).then((response) => {
        console.log(response);
        let jsonResult = response.data;
        if (response.data.state === 20000) {
          this.editForm = jsonResult.data;
          this.dialogFormVisible = true;
        } else if (jsonResult.state == 40400) {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
              this.loaduserList();
            }
          });
        }else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {}
          });
        }
      })
    },
    submitEditForm() {
      let url = 'http://localhost:8080/order/' + this.editForm.id + '/update';

      let formData = this.qs.stringify(this.editForm);

      this.axios.post(url, formData).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '修改订单成功！',
            type: 'success'
          });
          this.dialogFormVisible = false;
          this.loaduserList();
        } else if (jsonResult.state == 40400) {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
              this.dialogFormVisible = false;
              this.loadorderList();
            }
          });
        } else if (jsonResult.state == 40900) {
          this.$message.error(jsonResult.message);
        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
              this.dialogFormVisible = false;
            }
          });
        }
      });
    },
    handleDelete(row,order) {
      let url = 'http://localhost:8080/order/'+order.id+'/delete';
        // this.axios.post(url).then((response) => {
        //   if (response.row.state === 20000) {
        //     this.$message({
        //       message: "功能删除成功",
        //       type: 'success'
        //     });
        //     this.loadFunction();
        //   } else {
        //     this.$alert(response.row.message, '错误', {
        //       confirmButtonText: '确定',
        //       callback: action => {
        //       }
        //     });
        //   }
        // })
      this.axios.post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '删除【' + order.name + '】订单成功！',
            type: 'success'
          });
          this.loadorderList();
        } else if (jsonResult.state == 40400) {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadorderList();
            }
          });
        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {}
          });
        }
      });
    },
    loadFunction() {
      this.axios.get("http://localhost:8080/order/orderm/select").then((response) => {
        this.data = response.data.data;
      })
    },
    loadorderList() {
      let url = 'http://localhost:8080/order?page=1&pageSize='+this.pageSize;
      this.axios.get(url).then((response) => {
        console.log(response.data)
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          let data = jsonResult.data;
          this.tableData = data.list;
          this.currentPage = data.page;
          this.total = data.total;
        }else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {}
          });
        }
      });
    },
    handleSizeChange(val) {
      if(this.isSelect){
        this.onSelectClick(this.currentPage,val);
      }else{
        this.pageSelect(this.currentPage,val);
      }
    },
    handleCurrentChange(val) {
      if(this.isSelect){
        this.onSelectClick(val,this.pageSize);
      }else{
        this.pageSelect(val,this.pageSize);
      }
    },
    pageSelect(page,pageSize){
      let url = 'http://localhost:8080/order?page='+page+'&pageSize='+pageSize;
      this.axios.get(url).then((response)=>{
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          let data = jsonResult.data;
          this.tableData = data.list;
          this.currentPage = data.page;
          this.total = data.total;
        }else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {}
          });
        }
      })
    },
    onResetSelect(){
      this.order.status='';
      this.order.type='';
      this.order.theme='';
      this.order.tag='';
      this.order.director='';
      this.isSelect = false;
      this.loadorderList();
    }
  },
  mounted() {
      this.loadorderList();
  }
}
</script>

<style scoped>

</style>